<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <img :src="images[currentImage].imgSrc" alt="" @click="imageHandler">
        <button @click="prevHandler">上一张</button>
        <button @click="nextHandle">下一张</button>
    </div>
    <script src="./vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    images: [
                        {id:1, imgSrc:"./images/1.png"},
                        {id:2, imgSrc:"./images/2.png"},
                        {id:3, imgSrc:"./images/3.png"},
                        {id:4, imgSrc:"./images/4.png"},
                    ],
                    currentImage:0,
                }
            },
            methods: {
                // 上一页
                prevHandler(e) {
                    this.currentImage--;
                    if (this.currentImage == -1) {
                        this.currentImage = 3;
                    }
                },
                // 下一页
                nextHandle(e) {
                    this.currentImage++;
                    if (this.currentImage == 4) {
                        this.currentImage = 0;
                    }
                },
                // e是event对象, 每个事件都有, 可以写, 也可以不写
                imageHandler(e) {
                    console.log(e)
                    console.log(e.target)
                    console.log(this)
                }
            },
            // 钩子函数, 组件创建完成后执行
            created() {
                console.log(this);
                // 设置指定函数,以指定时间间隔周期性执行, 单位毫秒
                // this 的指代问题, 使用function() {}定义函数, this指代的是当前对象
                // 使用 () => {} 定义的函数, 指代的是定义当前定时器的父级对象

                // setInterval(function() {
                //     // 这个this是window对象
                //     console.log(this)
                // }, 1000);

                // 以下两种办法都可以获取到vue对象
                setInterval(() => {
                    // 这个this是Vue对象
                    this.currentImage++;
                    if (this.currentImage == 4) {
                        this.currentImage = 0;
                    }
                }, 1000);

                // let _this = this
                // setInterval(function() {
                //     console.log(_this)
                // }, 1000)

            },
        });
    </script>
</body>
</html>